import React, { Component } from 'react';
import styles from './index.module.scss';
import { loadCodemirror, createEditor,loadBeautify } from '@/utils/utils';

class Comp extends Component {
  componentDidMount = async () => {
    await loadCodemirror()
    console.log('加载成功');
    this.initEditor();
  };

  //初始化编辑器
  initEditor = () => {
    const { content } = this.props;
    var myCodeMirror = (this.myCodeMirror = createEditor(this.editor, {
      mode: 'htmlmixed', // 设置 HTML 模式
      theme: 'material', // 主题
    }));

    this.myCodeMirror.setValue(content);

    //有改变时触发
    myCodeMirror.on('changes', (cm, changes) => {
      var val = myCodeMirror.getValue();
      this.props.onChange(val,changes)
    });
    // 选中的内容
    myCodeMirror.on('cursorActivity', function () {});
  };
  render() {
    return (
      <div className={styles.left}>
        <div className={styles.editor}>
          <textarea ref={dom => (this.editor = dom)}></textarea>
        </div>
      </div>
    );
  }
}

export default Comp;
